import '@umijs/max';
import {List, Modal, Typography} from 'antd';
import React, {useEffect, useState} from 'react';
import {listMyTeamSpaceUsingPost} from "@/services/backend/spaceUserController";
import {RightOutline} from "antd-mobile-icons";
import {useNavigate} from "@@/exports";
interface Props {
  visible: boolean;
  onSubmit?: () => void;
  onCancel?: () => void;
}

/**
 * 创建弹窗
 * @param props
 * @constructor
 */
const MyJoinTeamModal: React.FC<Props> = (props) => {
  const {visible, onSubmit, onCancel} = props;
  const [spaceUserVOS, setSpaceUserVOS] = useState<API.SpaceUserVO[]>();
  const navigate = useNavigate();
  useEffect(() => {
    const initData = async () => {
      const res = await listMyTeamSpaceUsingPost();
      setSpaceUserVOS(res.data ?? []);
    }
    initData();
  }, [])

  const toSpace= async (spaceId) => {
    navigate(`/my/team/${spaceId}`);
  }
  return (
    <Modal
      destroyOnClose
      closable={false}
      title={'我加入的团队'}
      open={visible}
      footer={null}
      onCancel={() => {
        onCancel?.();
      }}
    >
      <List
        bordered
        dataSource={spaceUserVOS}
        renderItem={item => (
          <List.Item>
            <Typography.Text >{item?.space?.spaceName}</Typography.Text>
            <RightOutline
              style={{
                transition: 'transform 0.15s ease-in-out',
                cursor: 'pointer',
                transform: 'scale(1)', // 默认状态
              }}
              onClick={async () => {
              await toSpace(item?.space?.id)
                onSubmit?.()
            }}/>
          </List.Item>
        )}
      />
    </Modal>
  );
};
export default MyJoinTeamModal;
